<template>
 <div class="app-container">
    <el-table
      v-loading="listLoading"

      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

      <el-table-column label="任务 ID" width="195">
        <template slot-scope="scope">
          {{ scope.row.ID }}
          
        </template>
      </el-table-column>
      <el-table-column label="目标" width="195">
        <template slot-scope="scope">
          {{ scope.row.Target }}
        </template>
      </el-table-column>
      <el-table-column label="Target-type" width="105">
        <template slot-scope="scope">
          {{ scope.row["Target-type"] }}
        </template>
      </el-table-column>
      <el-table-column label="Function" width="85">
        <template slot-scope="scope">
          {{ scope.row.Function }}
        </template>
      </el-table-column>

      <el-table-column label="User" width="55">
        <template slot-scope="scope">
          {{ scope.row.User }}
        </template>
      </el-table-column>

      <el-table-column label="StartTime" width="195">
        <template slot-scope="scope">
          {{ scope.row.StartTime }}
        </template>
      </el-table-column>

      <el-table-column label="参数" width="195">
        <template slot-scope="scope">
          {{ scope.row.Arguments }}
        </template>
      </el-table-column>

      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button v-if="row.status!='published'" size="mini" type="success" @click="check_job(row, $index)">
            查看结果
          </el-button>

        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="详情" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="Remark">
          <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
        </el-form-item>
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          Cancel
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          Confirm
        </el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
import { getList,getJob } from '@/api/jobs'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      dialogFormVisible: false,
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      temp: {   
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published'
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    check_job(data){
      console.log(data.StartTime)
      getJob(data.ID).then(response => {
        var resp = response.data
        console.log(resp)
        console.log(resp.info[0].Result)
        this.dialogFormVisible = true
        
        this.temp.remark = JSON.stringify(resp.info[0].Result)
      })
      
    },

    fetchData() {
      this.listLoading = true
      getList().then(response => {
        var resp = response.data.return[0]
        this.list = []
        for (var i in resp){
          var j = resp[i]
          j['ID'] = i
          this.list.push(j)
        }
        this.listLoading = false
      })
    }
  }
}
</script>
